Accordion Icons: Which Signifiers Work Best?手風琴圖示：哪些識別符號效果最好？
手風琴（Accordion）是一種流行的使用者介面元素，尤其在移動端具有重要意義。它能夠摺疊內容，幫助控制頁面長度，降低視覺複雜性，讓使用者專注於當前任務相關的內容。
本文探討了哪種圖示最適合作為手風琴的識別符號，以清晰地傳達“展開內容而非跳轉到新頁面”的意圖。
常用的手風琴圖示
- 下拉符號（Caret）：通常表示“展開”操作，並可透過旋轉動畫指示相反動作（摺疊）。
- 加號（Plus）：顯示“展開”，摺疊時變為減號。
- 右箭頭（Right-Facing Arrow）：有時表示“展開”，也可能表示跳轉到新頁面。
- 無圖示（No Icon）：完全沒有識別符號。
- 幹擾圖示（Foil Icon）：一種控制變數，用於測試圖示本身是否影響使用者行為。
方法論（Methodology）
實驗設計
- 原型製作：我們建立了11個不同行業的移動網站原型（如電商、新聞、教育等），展示選單和手風琴功能。
- 圖示變體：為每個原型製作五種版本，分別使用不同的圖示（下拉符號、加號、右箭頭、幹擾圖示或無圖示）。
- 任務設計：設計簡單任務，如“在選單中找到洗碗機的評論”。
- 實驗裝置：所有測試均在移動裝置上進行，採用點選優先的任務流程。
資料收集
記錄兩類資料：
- 點選位置：使用者點選文字標籤、圖示、兩者之間的空白區域，或其他位置。
- 期望結果：透過問卷調查，記錄使用者期望操作後的結果（展開內容或跳轉到新頁面）。
研究結果
使用者點選行為
- 主要點選區域：
- 使用者多點選文字標籤或圖示，而非兩者之間的空白區域。
- 使用“下拉符號”時，使用者顯著更傾向於點選圖示，而非文字標籤。
- 無圖示的影響：
- 當沒有圖示時，使用者大多點選文字標籤，而非圖示位置的空白區域。
- 這表明強烈的視覺識別符號對於使用者操作至關重要。
使用者期望分析
- 期望跳轉到新頁面的機率：
- 幹擾圖示和無圖示條件下，使用者更傾向於認為點選操作會跳轉到新頁面。
- 下拉符號和加號更有效地傳遞“展開內容”的意圖。
- 右箭頭沒有顯著表現出能減少使用者“跳轉頁面”期望的效果。
- 識別符號與期望的聯絡：
- 下拉符號顯著優於幹擾圖示和無圖示，在提示使用者內容將“留在當前頁面”方面表現最好。
- 加號稍遜於下拉符號，但優於幹擾圖示。
- 右箭頭的效果接近幹擾圖示，未表現出對期望的明確改善。
關鍵發現
- 圖示的重要性：沒有圖示或使用無關圖示會增加使用者的困惑，強化了使用明確識別符號的必要性。
- 下拉符號的優勢：相較於其他圖示，下拉符號最能傳遞“展開內容”而非“跳轉頁面”的意圖。
- 右箭頭的侷限：右箭頭未能顯著降低使用者對“跳轉頁面”的預期，不適合作為手風琴的識別符號。
- 使用者點選位置：使用者傾向於點選標籤和圖示兩者中的任意一個，說明不應為兩者設定不同的功能（如“標籤跳轉頁面，圖示展開內容”）。
設計建議
1. 使用明確的識別符號
下拉符號是最適合作為手風琴識別符號的圖示，能夠清晰傳達展開內容的意圖。
2. 避免分裂按鈕設計
不要將標籤和圖示分配不同的功能（如標籤跳轉頁面，圖示展開手風琴）。
3. 統一選單行為
選單項要麼展開子選單，要麼跳轉到頁面，不建議同時支援兩種行為，尤其是右對齊的圖示會讓使用者更困惑。